<template>
  <el-container id="_container" class="o-hid">
    <el-header :height="baseHead_h" class="header">
      <base-header/>
    </el-header>
    <el-container>
      <el-aside :width="menuAside_w" :style="{height:`calc(100vh - ${baseHead_h})`,padding:'0px'}">
        <menu-aside
          class="menu-aside"
        />
      </el-aside>
      <el-container>
        <el-header
          :height="routerHead_h">
          <router-tag/>
        </el-header>
        <div :style="{height:`calc(100vh - ${baseHead_h} - ${routerHead_h})`}" class="p-relative o-hid">
          <nuxt/>
        </div>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import {mapState} from 'vuex'
import BaseHeader from "@/components/layout/BaseHeader";
import MenuAside from "@/components/layout/MenuAside";
import RouterTag from "@/components/layout/RouterTag";

export default {
  name: "base-layout",
  components: {RouterTag, MenuAside, BaseHeader},
  data(){
    return {
      baseHead_h: '60px',
      menuAside_w: '240px',
      routerHead_h: '30px'
    }
  },
  created(){
  }
}
</script>

<style scoped>
#_container {
  height: calc(100vh);
}
.header{
  border-bottom: 1px solid #efefef;
}
.menu-aside{
  height: 100%;
}
</style>
